<template>
    <div class="music-list">
        <div class="back" @click="back">
            <i class="back-icon iconfont icon-left"></i>
        </div>
        <div class="title" ref="title">
            <h1 class="scroll-text" v-html="title"></h1>
        </div>
        <div class="bg-image" :style="bgStyle" ref="bgImage"
             :class="{'scroll-up-enough': scrollUpEnough,
                        'scroll-down': scrollDow }"
        >

            <play-all v-show="scrollUpEnough" :songs="songs"></play-all>
            <div class="filter" ref="filter"></div>
        </div>
        <div class="bg-layer" ref="layer"></div>
        <scroll
            :data="songs" class="list" ref="list"
            :probe-type="probeType"
            :listen-scroll="listenScroll"
            @scroll="scroll"
        >
            <div class="song-list-wrapper">
                <song-list
                    :songs="songs"
                    @select="selectItem"
                    @clickIcon="showSongMenu"
                    :rank="rank"
                >
                </song-list>
            </div>
            <div class="loading-container" v-show="!songs.length">
                <Load :isError="isLoadError" @loadRefresh="loadRefresh"></Load>
            </div>
        </scroll>
    </div>
</template>

<script type="text/ecmascript-6">
    import Scroll from 'base/scroll/scroll'
    import SongList from 'base/song-list/song-list'
    import Load from 'base/load/load'
    import PlayAll from 'components/play-all/play-all'
    import PlayListMixin from 'common/mixins/play-list'
    import TabMixin from 'common/mixins/tab'
    import { getStyle } from 'common/js/dom'
    import { scrollText } from 'common/js/scroll-text'
    import { mapActions, mapMutations } from 'vuex'
    import { REFRESH_TIME, MINI_PLAYER_HEIGHT } from 'common/js/config'

    const TITLE_HIGHT = 47
    const LOAD_REFRESH_EVENT = 'loadRefresh'

    export default {
        name: 'music-list',
        mixins: [PlayListMixin, TabMixin],
        data() {
            return {
                scrollY: 0,
                scrollUpEnough: false,
                scrollDow: false
            }
        },
        props: {
            bgImage: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            songs: {
                type: Array,
                default: () => {
                    return []
                }
            },
            isLoadError: {
                type: Boolean,
                default: false
            },
            rank: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            bgStyle() {
                return `background-image:url(${this.bgImage})`
            }
        },
        methods: {
            scroll(pos) {
                this.scrollY = pos.y
            },
            back() {
                this.$router.back()
            },
            selectItem(item, index) {
                this.selectPlay({
                    list: this.songs,
                    index: index
                })
            },
            showSongMenu(song) {
                this.setMenuSong(song)
            },
            // 重设滚动部分底部距离
            handlePlayList(playList) {
                const bottom = playList.length > 0 ? `${MINI_PLAYER_HEIGHT}px` : ''
                const el = this.$refs.list.$el
                getStyle(el, 'bottom', bottom)
                this.$refs.list.refresh()
            },
            loadRefresh() {
                this.$emit(LOAD_REFRESH_EVENT)
            },
            ...mapActions([
                'selectPlay'
            ]),
            ...mapMutations({
                setMenuSong: 'SET_MENU_SONG'
            })
        },
        watch: {
            scrollY(newY) {
                // 设置layer在不高与顶不标题时，虽歌曲列表向上滚动
                let y = Math.max(this.minTranslateY, newY)
                let translate = `translate3d(0, ${y}px, 0)`
                getStyle(this.$refs.layer, 'transform', translate, true)

                // 当歌曲列表滑动到达顶部标题时，更新图片的样式
                if (newY < this.minTranslateY) {
                    this.scrollUpEnough = true
                } else {
                    this.scrollUpEnough = false
                }

                // 当歌曲列表向下滑动时，放大图片
                let scale = 1
                const percent = Math.abs(newY / this.imageHeight)
                if (newY > 0) {
                    scale = 1 + percent
                    let c = `scale(${scale})`
                    getStyle(this.$refs.bgImage, 'transform', c, true)

                    this.scrollDow = true
                } else {
                    this.scrollDow = false

                    // 上滑图片时，为图片添加模糊滤镜
                    let blur = `blur(${Math.min(20 * percent, 20)})px`
                    getStyle(this.$refs.filter, 'backdrop-filter', blur, true)
                }
            }
        },
        created() {
            this.probeType = 3
            this.listenScroll = true
            setTimeout(() => {
                scrollText(this.$refs.title)
            }, REFRESH_TIME)
        },
        mounted() {
            this.imageHeight = this.$refs.bgImage.clientHeight
            this.minTranslateY = (-this.imageHeight) + TITLE_HIGHT
            let top = `${this.imageHeight}px`
            getStyle(this.$refs.list.$el, 'top', top)

            // 监听窗口大小改变事件
            window.addEventListener('resize', this.back)
        },
        // 移除窗口事件
        beforeDestroy() {
              window.removeEventListener('resize', this.back)
        },
        components: {
            Scroll,
            SongList,
            Load,
            PlayAll
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"
    .music-list
        position: fixed
        z-index: 100
        top: 0
        left: 0
        bottom: $height-tab
        right: 0
        background: $color-background
        .back
            position absolute
            top: 0
            left: 6px
            z-index: 50
            .back-icon
                display: block
                padding: 10px 12px
                font-size: $font-size-large-x
                color: $color-text-w
        .title
            position: absolute
            top: 0
            left: 10%
            z-index: 40
            width: 80%
            overflow: hidden
            white-space: nowrap
            text-align: center
            line-height: 47px
            .scroll-text
                display: inline-block
                font-size: $font-size-large
                color: $color-text-w
        .bg-image
            position: relative
            width: 100%
            height: 0
            padding-top: 70%
            /* 设置旋转元素的基点位置 */
            transform-origin: top
            background-size: cover
            &.scroll-up-enough
                z-index: 10
                padding-top: 0
                height: 47px
            &.scroll-down
                z-index: 10
            .play-all
                position: fixed
                top: 47px
                width: 100%
                box-shadow: 0 1px 6px $color-text-ld
                z-index: 50
            .filter
                position: absolute
                top: 0
                left: 0
                width: 100%
                height: 100%
                background: rgba(7, 17, 27, 0.4)
        .bg-layer
            position: relative
            height: 100%
            background: $color-background
        .list
            position: fixed
            top: 0
            bottom: 0
            width: 100%
            background: $color-background
            .song-list-wrapper
                padding-bottom: 12px
            .loading-container
                position: absolute
                width: 100%
                top: 45%
                transform: translateY(-50%)
</style>